import { Component } from "react";

class Hello extends Component {
  render() {
    return (
      <div>
        <h2>Hello</h2>
        <p>COUNT: {this.props.count}</p>
        <p>MSG: {this.props.msg}</p>
      </div>
    );
  }
}

function withAddCount(WrappedComponent) {
  return class AddCount extends Component {
    render() {
      // 不要吃掉原本组件需要的 Prop
      return <WrappedComponent {...this.props} />;
    }
  };
}

const NewHello = withAddCount(Hello);

export default class App extends Component {
  render() {
    return (
      <div>
        <h1>App</h1>
        <hr />

        {/* 直接调用 Hello 时，传递 count 与 msg */}
        <Hello count={1} msg="a" />

        {/* 调用被 withAddCount 高阶过后的 Hello 时，传递 count 与 msg */}
        <NewHello count={1} msg="a" />

        <NewHello count={10} msg="abc" />
      </div>
    );
  }
}
